<template>
  <div>
    <curd-title :title="'可供物料分类列表'" />
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
      v-model="form"
      @row-save="rowSave"
      @row-click="handleRowClick"
      @selection-change="selectionChange"
    >
      <template slot="menuLeft">
        <el-button type="primary" @click="selectMaterial">选择物料分类</el-button>
        <el-button type="primary" @click="deleteGroup">批量删除</el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { option } from '@/option/tenant/supplier/capa-info'
import CurdTitle from '@/components/base/title'
export default {
  name: 'CapaInfo',
  components: { CurdTitle },
  props:['info'],
  data() {
    return {
      data: [],
      option: option.call(this),
      form: {},
      column: {},
      checkIndex: []
    }
  },
  watch:{
    data:{
      deep:true,
      handler(val){
        console.log(val)
        this.$emit('update:info',val)
      }
    }
  },
  methods: {
    selectMaterial() {
      this.$quickModal({
        title: '物料分类列表',
        width: '80%',
        componentIsTag: true,
        component: 'materials-category',
        props: {
          multiple: true
        },
        on: {
          change: row => {
            // console.log(row)
            row.map((n, i) => {
              this.$refs.crud.rowCellAdd({
                classifyCode: n.classifyCode,
                classifyCnName: n.classifyCnName,
                $cellEdit: true
              })
            })
          }
        }
      })
    },
    rowSave(form, done) {
      this.$message.success('新增数据' + JSON.stringify(form))
      done()
    },
    // handleCell(row, index) {
    //   this.column = row
    //   this.$refs.crud.rowCell(row, index)
    // },
    handleRowClick(row, event, column) {
      this.column = row
      this.$refs.crud.rowCell(row, row.$index)
    },
    selectionChange(row) {
      this.checkIndex = row.map(v => v.$index)
    },
    deleteGroup() {
      this.data = this.data.filter(item => !this.checkIndex.includes(item.$index))
    },
  }
}
</script>

<style></style>
